<script setup lang="ts">
import { getMiaoShaTime_c, getMiaoShaData_c } from '@/api/lidare'
import { ref, onMounted, onActivated, computed } from 'vue'
import type { MiaoShaType, MsTime } from '@/type/typings'
import type router from '@/router';

// 秒杀数据
const miaoShaData = ref<Array<MiaoShaType>>([])

// 倒计时
const miaoShaTime = ref<Array<MsTime>>([])

onMounted(async () => {
    let { data } = await getMiaoShaData_c()
    console.log(data._data.list);
    miaoShaData.value = data._data.list

    let { data: data2 } = await getMiaoShaTime_c()
    console.log(data2._data.list);
    miaoShaTime.value = data2._data.list

})

const startTime = computed(() => {
    return miaoShaTime.value[0]?.activityStartTime.split(' ')[1].slice(0, 5) || 0
})

const time = computed(() => {
    return new Date(miaoShaTime.value[0]?.activityEndTime).getTime() - Date.now() || 0
})


</script>

<template>
    <div class="miaosha fixed-zbest">
        <div class="ms-head">
            <van-icon name="arrow-left" size="20" @click.stop="$router.back()" />
            <span class="title">可乐优品限时秒杀</span>
            <van-icon name="share-o" size="25" />
        </div>
        <div class="ms-bg">
            <img src="https://s1.huishoubao.com/colagoods/app/seckill/image/seckill-bg-new.675e5310.svg" alt="">
            <div class="ms-bg-text" v-if="miaoShaTime.length">
                <div class="text-time">{{ startTime }}</div>
                <div class="text-title">正在秒杀</div>
            </div>
            <div class="ms-bg-djs">
                <div v-if="miaoShaTime.length">
                    <span class="finish-text">距离结束</span>
                    <van-count-down :time="time" class="timers" v-show="miaoShaTime.length">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes
                            }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds
                            }}</span>
                        </template>
                    </van-count-down>
                </div>
                <div v-else>
                    <span class="finish-text">敬请期待</span>
                </div>
            </div>
        </div>
        <div class="ms-ph-box" v-if="miaoShaTime.length">
            <div class="ms-ph-list">
                <div class="ms-ph-item" v-for="item in miaoShaData" :key="item.id">
                    <img :src="item.image" alt="">
                    <div class="ms-ph-right">
                        <div class="ph-title">
                            {{ item.fullName }}
                        </div>
                        <div class="tag">
                            <span v-for="t in item.tags">{{ t }}</span>
                        </div>
                        <div class="ms-price-btn">
                            <div class="ms-price">
                                <div class="ms-sale-price">￥{{ item.salesPrice / 100 }}</div>
                                <div class="ms-re-price">原价
                                    <span>￥{{ item.referencePrice / 100 }}</span>
                                </div>
                            </div>
                            <div class="ms-btn">
                                <div class="s-count">
                                    <span>仅剩{{ item.isRemind }}台</span>
                                    <span class="s-log"></span>
                                </div>
                                <div class="ms-buy" @click.stop="$router.push(`/detail/${item.id}`)">立即抢购</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="not-data" v-else>
            <img src="@/assets/images/home/not_data.png" alt="">
        </div>
    </div>
</template>

<style scoped lang="scss">
.miaosha {
    width: 100%;
    background-color: #f4f5f8;
    overflow: scroll;

    .ms-head {
        width: 100%;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 30;

        .title {
            width: 2.3rem;
            font-size: 20px;
            font-weight: 700;
            text-align: center;
        }

    }

    .ms-bg {
        width: 100%;
        position: relative;
        position: fixed;
        top: 45px;
        left: 0;

        >img {
            width: 100%;
        }

        .ms-bg-text {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -40%);

            .text-time {
                font-size: 20px;
                font-weight: 900;
                color: #fff;
                font-style: italic;
            }

            .text-title {
                font-size: 13px;
                color: #fff;
            }
        }

        .ms-bg-djs {
            width: 355px;
            height: 40px;
            left: 10px;
            bottom: -23px;
            position: absolute;
            background-color: #fff;
            text-align: center;
            align-items: center;
            line-height: 40px;
            display: flex;
            justify-content: center;

            .finish-text {
                font-size: .14rem;
                color: #444;
            }

            .timers {
                display: flex;
                overflow: hidden;
                margin-left: 4px;
                background-repeat: no-repeat;
                background-size: cover;
            }

            .colon {
                display: inline-block;
                margin: 0 .02rem;
                line-height: .16rem;
                color: var(--home-red);
            }

            .block {
                display: inline-block;
                width: .22rem;
                color: #fff;
                height: .16rem;
                line-height: .16rem;
                font-size: .14rem;
                text-align: center;
                padding: 0 .01rem;
                background-color: #d700af;
            }
        }
    }

    .ms-ph-box {
        width: 355px;
        padding: 10px;
        margin-top: 25px;

        .ms-ph-list {
            display: flex;
            flex-direction: column;
        }
    }
}

.ms-ph-item {
    width: 100%;
    padding-left: 12px;
    box-sizing: border-box;
    height: 132px;
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-bottom: 10px;


    img {
        width: 78px;
        height: 90px;
        margin-right: 15px;
    }

    .ph-title {
        width: 250px;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ms-price-btn {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
    }

    .tag {
        display: flex;
        margin-top: 4px;

        span {
            padding: 1px 2px;
            border: 1px solid #ccc;
            font-size: 12px;
            margin-right: 5px;
            color: #666;
        }
    }

    .ms-price {
        margin-top: 7px;
    }


    .ms-sale-price {
        font-size: 15px;
        font-weight: 800;
        font-style: italic;
        color: red;
    }

    .ms-re-price {
        margin-top: 2px;
        font-size: 12px;
        color: #444;

        >span {
            text-decoration: line-through;
        }
    }

    .s-count {
        font-size: 12px;
        color: #e0253c;
        margin-bottom: 4px;

        .s-log {
            display: inline-block;
            width: 40px;
            height: 4px;
            background-color: #e0253c;
            border-radius: 2px;
            margin-left: 10px;
        }
    }

    .ms-buy {
        width: 100px;
        height: 30px;
        font-size: 15px;
        line-height: 30px;
        background-color: #e0253c;
        color: #fff;
        text-align: center;
    }


}

.not-data {
    margin-top: 1.68rem;
}
</style>
